<template>
  <div class="login-page">
      <navgation-bar :pageName="'登录'" @onLeftClick="onBackClick">
      </navgation-bar>

      <div class="login-page-content">
          <div class="input-container">
              <input v-model="username" type="text" placeholder="用户名">
          </div>

          <div class="input-container">
              <input v-model="password" type="password" placeholder="密码">
          </div>
          <div class="login-page-content-login page-commit" @click="onLoginClick">
              登录
          </div>

          <a class="login-page-content-register" @click="onToRegisterClick">注册新用户</a>
      </div>
  </div>
</template>

<script>
import NavgationBar from '@c/currency/NavigationBar'
export default {
  components: {
    NavgationBar
  },
  data: function () {
    return {
      username: '',
      password: '',
      md5Password: ''
    }
  },
  methods: {
    onBackClick () {
      this.$router.go(-1)
    },
    /**
    * 登录按钮点击事件
    */
    onLoginClick () {
      if (this.username.length === 0 || this.password.length === 0) {
        alert('用户或密码未输入')
      }

      // 与原生交互，验证用户输入的用户名和密码
    },
    onToRegisterClick () {
      this.$router.push({
        name: 'register',
        params: {
          routerType: 'push'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
  .login-page {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: white;
      overflow: hidden;
      &-content {
          width: 100%;
          height: 100%;
          // &-username {
          // }
          // &-password {
          // }
          &-login {
              margin-top: 40%;
          }

          &-register {
              font-size: $infoSize;
              color: $textHintColor;
              margin-top: $marginSize;
              display: block;
              padding: $marginSize;
              float: right;
          }
      }
  }
</style>
